import {
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Tabs, message, theme } from 'antd';
import { history } from 'umi';
import {userRegister} from "@/services/swagger/userController";
import React from "react";
const Page = () => {
  const { token } = theme.useToken();
  /**
   * 提交注册表单
   * @param userRegisterRequest
   */
  const handleSubmit = async (userRegisterRequest:API.UserRegisterRequest) => {
    const res = await userRegister(userRegisterRequest);
    if (res.code === 0){
      message.success("注册成功");
    }else {
      message.error("注册失败")
    }
  }

  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
      }}
    >
      <LoginFormPage
        onFinish={async (val) => {
          await handleSubmit(val as API.UserRegisterRequest)
          history.push("/user/login")
        }}
        logo="https://github.githubassets.com/favicons/favicon.png"
        backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
        title="面试鸡"

        submitter={{
          searchConfig: {
            submitText: '注册', // 👈 关键：修改按钮文字为“注册”
          },
          render: (_, dom) => dom.pop(), // 保留默认布局，只取提交按钮
        }}
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        subTitle="面试鸡-注册"
        activityConfig={{
          style: {
            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
            color: token.colorTextHeading,
            borderRadius: 8,
            backgroundColor: 'rgba(255,255,255,0.25)',
            backdropFilter: 'blur(4px)',
          },
          title: '面试鸡-模拟面试平台',
          action: (
            <Button
              size="large"
              style={{
                borderRadius: 20,
                background: token.colorBgElevated,
                color: token.colorPrimary,
                width: 120,
              }}
              onClick={() => history.push('/user/login')}
            >
              去登录
            </Button>
          ),
        }}
      >
        <Tabs
          centered
          activeKey={'account'}
        >
          <Tabs.TabPane key={'account'} tab={'账号注册'} />
        </Tabs>
        {(
          <>
            <ProFormText

              name="userAccount"
              fieldProps={{
                size: 'large',
                prefix: (
                  <UserOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'请输入用户名!'}
              rules={[
                {
                  required: true,
                  message: '请输入用户名!',
                },
              ]}
            />
            <ProFormText.Password
              name="userPassword"
              fieldProps={{
                size: 'large',
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'请输入密码！'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
            <ProFormText.Password
              name="checkPassword"
              fieldProps={{
                size: 'large',
                prefix: (
                  <LockOutlined
                    style={{
                      color: token.colorText,
                    }}
                    className={'prefixIcon'}
                  />
                ),
              }}
              placeholder={'请确认密码！'}
              rules={[
                {
                  required: true,
                    message: '请确认密码！',
                },
              ]}
            />
          </>
        )}
        <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          <a
            style={{
              float: 'right',
            }}
          >
          </a>
        </div>
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page />
    </ProConfigProvider>
  );
};
